<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<script src="js/jquery2.js"></script> 
		<script src="js/bootstrap.min.js"></script>
		<script src="js/vue.js"></script>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		
	</head>
	<style>
		body{
			background: url(img/background.jpg) no-repeat;
			background-attachment: fixed;
		}
	</style>
	<body>
		<div class="container" id="app">
			<div class="row">
				<!-- 个人信息 -->
				<div class="col-md-12" style="background: #fff;">
					<div class="col-md-3" style="padding-bottom: 10px;">
						
						<div class="row" style="padding: 10px;">
							<div class="col-md-4">
								<img v-bind:src="UserInfo.UserHead" height="40px" class="img-circle" />
							</div>
							<div class="col-md-8">
								<h4>{{UserInfo.UserName}}</h4>
							</div>
						</div>
						<a href="./userinfo" class="btn btn-block btn-primary">
							<span class="glyphicon glyphicon-eye"></span>
							查看我的信息
						</a>
						<a href="./userlogin" class="btn btn-block btn-danger">
							<span class="glyphicon glyphicon-refresh"></span>
							切换账号
						</a>
					</div>
					<!-- 发送推文 -->
					<div class="col-md-9" style="padding: 10px;">
						<div class="form-group" style="overflow: hidden;">
							<label class="control-label">发个推文</label>
							<textarea class="form-control" rows="3" placeholder="随便写点什么..." v-model="TweetText" ></textarea>
							<span class="help-block">选择附件</span>
							<a href="#" onclick="document.getElementById('inimage1').click()"  >
								<img src="img/insert.png" width="40px" v-if="Inimg.img1==''" />
								<img v-bind:src="Inimg.img1" width="40px" v-else />
							</a>
							<a href="#" onclick="document.getElementById('inimage2').click()"  >
								<img src="img/insert.png" width="40px" v-if="Inimg.img2==''" />
								<img v-bind:src="Inimg.img2" width="40px" v-else />
							</a>
							<a href="#" onclick="document.getElementById('inimage3').click()"  >
								<img src="img/insert.png" width="40px" v-if="Inimg.img3==''" />
								<img v-bind:src="Inimg.img3" width="40px" v-else />
							</a>
							<input type="file" id="inimage1" accept="image/jpg,image/jpeg,image/png" style="display:none;" @change="ReadImage($event,1)"  />
							<input type="file" id="inimage2" accept="image/jpg,image/jpeg,image/png" style="display:none;" @change="ReadImage($event,2)"/>
							<input type="file" id="inimage3" accept="image/jpg,image/jpeg,image/png" style="display:none;" @change="ReadImage($event,3)"/>
							
							
						</div>
					</div>
					<div class="col-md-9 col-md-offset-3">
						<div class="form-group">
							<button class="right btn btn-success" data-target="#sendtweet" data-toggle="modal" @click="SendTweet">
								<span class="glyphicon glyphicon-ok"></span>
								发送推文
							</button>
							<span class="help-block">图片最多插入三张，且全部小于2M。</span>
						</div>
					</div>
				</div>
				<!-- 发送推文提示框 -->
				<div class="modal fade" id="sendtweet">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-body">
								<div class="progress">
									<div class="progress-bar progress-bar-striped active" role="progressbar"  v-bind:class="Send.Class" v-bind:style="Send.Style" ></div>
								</div>
								<h3 class="text-center">
								{{Send.Text}}
								</h3>
							</div>
							<div class="modal-footer">
								<a href="./index" class="btn btn-success" >刷新</a>
							</div>
						</div>
					</div>
				</div>
				
				<!-- 查看推文 -->
				<div class="col-md-12" style="background: #fff;margin-top: 10px;">
					
					<div class="row" style="padding: 10px;">
						<div class="col-md-12" style="text-align: center;">
							<div class="btn-group"  >
								<button class="btn btn-primary">所有人</button>
								<button class="btn btn-default">只看我</button>
							</div>
						</div>
						
						<!-- 推文部分 -->
						<div class="col-md-12">
							<div class="row">
								<div class="col-md-12 " v-for="item in Tweet" >
									<div class="media" >
										<div class="media-left">
											<a href="#">
												<img  class="media-object" height="64px" width="64px"   v-bind:src="item.user_head" />
											</a>
											
										</div>
										<div class="media-body" >
											<h5 class="media-heading" >{{item.user_name}}</h5>
											<p>{{item.text}}</p>
											<!-- 图一 -->
											<a href="#" data-toggle="modal" data-target="#showbigimg" @click="BigImgClick(item.image1)" v-if="item.image1!=undefined" >
												<img v-bind:src="item.image1" class="img-rounded" width="100px" height="100px" />
											</a>
											<!-- 图二 -->
											<a href="#" data-toggle="modal" data-target="#showbigimg" @click="BigImgClick(item.image2)" v-if="item.image2!=undefined" >
												<img v-bind:src="item.image2" class="img-rounded" width="100px" height="100px" />
											</a>
											<!-- 图三 -->
											<a href="#" data-toggle="modal" data-target="#showbigimg" @click="BigImgClick(item.image3)" v-if="item.image3!=undefined" >
												<img v-bind:src="item.image3" class="img-rounded" width="100px" height="100px" />
											</a>
										</div>

										<div class="media-bottom">
											<div class="page-header" style="margin-top: 0px;" >
												<!-- 点赞按钮组和回复和日期组 -->
												<div class="right media-bottom btn-group-xs" style="text-align: right;">
													<span>发送时间 {{item.createdate}}</span>
													<button class="btn btn-default">
														<span class="glyphicon glyphicon-thumbs-up"></span>
														123
													</button>
													
													<button class="btn btn-default">
														<span class="glyphicon glyphicon-thumbs-down"></span>
														77
													</button>
												</div>
												<!-- 回复组 -->
												<div class="input-group" style="margin-top: 5px;margin-bottom: 5px;">
													<input class="form-control" placeholder="回复点什么...." />
													<span class="input-group-btn">
														<button class="btn btn-default">发送</button>
													</span>
												</div>
												<div>
													<p>
														<strong>小小:</strong>
														挺好的不错
													</p>
													<button class="btn btn-primary">继续加载评论</button>
												</div>
												
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 查看大图 -->
						<div class="modal fade" id="showbigimg">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-body">
										<img v-bind:src="BigImg" class="img-rounded" width="100%" />
									</div>
								</div>
							</div>
						</div>
						
						<!-- 继续加载按钮 -->
						<div class="col-md-12">
							<button class="btn btn-block btn-default" @click="ContinueLoadTweet" >
								<span class="glyphicon glyphicon-download"></span>
								加载推文
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/index_js.js"></script>

</html>
